<template>
<li  @touchstart="_touchStart"
     @touchmove="_touchMove" :class="item.className">
       <slot></slot>
</li>
</template>
<script>
export default {
  props: {
    item: {
      Type: Object
    },
    list: {
      Type: Array
    }
  },
  data() {
    return {
      x: 0,
      y: 0,
      X: 0,
      Y: 0,
      swipeX: 0,
      swipeY: 0,
      className: ""
    };
  },
  methods: {
    _touchStart: function(event) {
      this.x = event.changedTouches[0].pageX;
      this.y = event.changedTouches[0].pageY;
      this.swipeX = true;
      this.swipeY = true;
    },
    _touchMove: function(event) {
      this.X = event.changedTouches[0].pageX;
      this.Y = event.changedTouches[0].pageY;
      // 左右滑动
      if (
        this.swipeX &&
        Math.abs(this.X - this.x) - Math.abs(this.Y - this.y) > 0
      ) {
        // 阻止事件冒泡
        event.stopPropagation();

        if (this.X - this.x > 10) {
          // 右滑
          event.preventDefault();
          this.$set(this.item, "className", "");
        }
        if (this.x - this.X > 10) {
          // 左滑
          event.preventDefault();
          this.list.map(item => {
            this.$set(item, "className", "");
          });
          this.$set(this.item, "className", "swipeleft");
        }
        this.swipeY = false;
      }
      // 上下滑动
      if (
        this.swipeY &&
        Math.abs(this.X - this.x) - Math.abs(this.Y - this.y) < 0
      ) {
        this.swipeX = false;
      }
    }
  }
};
</script>
<style lang="stylus">
</style>
